<template>

    <view class="goodsManage-list">
            <scroll-view 
                class="scroll-y" 
                scroll-y
                @scrolltolower="scrolltolower">
       
                <view class="group" v-for="(item,index) in list" :key="index" >
                        <view class="title" >
                                {{item.cardName}}
                                <view :class="[item.cardState == 0?'type-off':'type-on']">{{type[item.cardState]}}</view>
                        </view>
                        <view class="center">
                                <image :src="item.cardCarPhoto" class="pic"/>
                                <view class="info"  >
                                        <view class="now">￥{{item.cardCurrentprice}}</view>
                                        <view class="old">￥{{item.cardOriginalprice}}</view>
                                        <view class="num">库存 {{item.cardSum}}件</view>
                                        <view class="num">已售 {{item.cardSales}}件</view>
                                </view>

                                <view class="edit">   
                                         <image class="edit-icon" src="/static/images/edit_icon.png" @tap.stop="edit(item)" />
                                         <view class="edit-text">编辑</view>
                                </view>      

                                <view class="look">
                                         <image class="look-icon" src="/static/images/eye_icon.png" @tap.stop="toDetail(item)" />
                                         <view class="look-text">预览</view>
                               </view> 
                        </view>
                     
                </view>
       
            <PageBottom :LoadingType="loadingType" noMoreStr="抱歉,没有更多商品"/>
                
        </scroll-view> 
        <button class="addGoods" @tap="add">+新增商品</button>
    </view>
    
</template>

<script lang="ts">

import {postDetailSalonCard,postUpdateCardStatus} from '@/request/actions'
import PageBottom from '@components/pageBottom/index.vue'
import {Vue, Component } from 'vue-property-decorator';

const LIMIT = 5;

@Component({
         components:{
                PageBottom
        }
})
export default class extends Vue {
      
     
                list:Array<any> = [];
                loadingType:string|number = 'none';
                type:object = {
                        0:'已下架',
                        1:"已上架"
                };
                salonId:string|number = "";
                page:number = 1;
                limit:number = 5;
                bStop:boolean = true;


                toDetail(d:any){
                        let { cardId } = d;
                        uni.navigateTo({
                            url: `/detailPackages/pages/beautyDetail/index?cid=${cardId}&look=1`
                        })
                }
         
                scrolltolower(){
                        this.page++;
                        if(!this.bStop) return;
                         this.limit = LIMIT;
                        this.HttpDetailSalonCard(this.list);  
                }
                add(){
                        uni.navigateTo({
                                url:`/pages/editGoods/index`
                        })     
                }
                edit(d:any){
                      
                        let {cardId} = d;
                        uni.navigateTo({
                                url:`/pages/editGoods/index?cardId=${cardId}`
                        })   
                }
                HttpDetailSalonCard(arr:Array<any> = []){
                        let page = this.page;
                        let limit = this.limit;
                        let cardBelongtoid = this.salonId;
                        let list:Array<any> = arr;


                
                        postDetailSalonCard({page,limit,cardBelongtoid}).then((r:any)=>{
                                let {data:res} = r;
                        
                                if(res.status == 200){
                                                        
                                                list.push(...res.data.stulist)

                                                this.list = list;
                                                        if(res.data.total == 0){
                                                        this.loadingType = 0;
                                                        }else if(res.data.total == this.list.length){
                                                                this.loadingType = 1;
                                                
                                                        }
                                                }

                                                this.bStop = res.data.stulist < limit ?  false : true;
                                                
                        })
                }


     
        onShow(){
                let globalData = getApp().globalData;
                this.salonId = globalData.salonId;
                 this.limit = this.list.length <= LIMIT?LIMIT:this.list.length;
                this.page = 1;
                this.bStop = true;   
                this.HttpDetailSalonCard();     
            
        }
        
}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>